<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AutoComplete</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--    引入jquery     -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link href="../assets/css/siderbar.css" rel="stylesheet">
    <script src="../assets/js/sidebar2.js"></script>
    <script src="../assets/js/common.js"></script>
    <script src="../assets/js/infolayer2.js"></script>

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../assets/css/unpkg/swiper.min.css">
    <!-- Swiper JS -->
    <script src="../assets/js/unpkg/swiper.min.js"></script>
    <script src="../assets/layui-v2.5.6/layui.js"></script>
    <link href="../assets/layui-v2.5.6/css/layui.css" rel="stylesheet">
    <link href="../assets/css/historymapbook.css" rel="stylesheet">
</head>

<style>

</style>

<body>

    <div></div>

    <div id="info-layer" class="info-layer info-layer-hide">
        <div class="info-layer-title">
            <p id="info-layer-title">黄鹤楼</p>
            <img id="info-layer-close" width="32px" src="../assets/css/bootstrap/icons/x-circle-fill-white.svg" />
        </div>
        <div style="width: 100%;">
            <div><p style="margin: 6px 10px 6px 10px;" class="info-layer-middle-title">建于三国时代</p></div>
            <div class="info-layer-middle-content">
                <p>黄鹤楼始建于三国时代东吴黄武二年（223年）。</p>
                <p>三国时期黄鹤楼只是夏口城一角瞭望守戍的“军事楼”，晋灭东吴以后，三国归于一统，该楼在失去其军事价值的同时，随着江夏城地发展，逐步演变成为官商行旅“游必于是”、“宴必于是”的观赏楼。</p> 
                <p>唐代《元和郡县图志》记载：孙权始筑夏口故城，“城西临大江，江南角因矶为楼，名黄鹤楼。”是为了军事目地而建。而据《极恩录》记载说原为辛氏开设的酒店。</p>
                <p>唐永泰元年（765年）黄鹤楼已具规模，然而兵火频繁，黄鹤楼屡建屡废，仅在明清两代，就被毁7次，重建和维修了10次。有“国运昌则楼运盛”之说。最后一座建于同治七年（1868年），毁于光绪十年（1884年）。遗址上只剩下清代黄鹤楼毁灭后唯一遗留下来的一个黄鹤楼铜铸楼顶。</p>
                <p>黄鹤楼从北宋至20世纪50年代，还曾作为道教的名山圣地，是吕洞宾传道、修行、教化的道场。《道藏·历世真仙体道通鉴》言：“吕祖以五月二十日登黄鹤楼，午刻升天而去。故留成仙圣迹。”《全真晚坛课功经》中称其黄鹤楼头留圣迹。</p>
            </div>
        </div>

        <!-- <div style="height: 100%;width: 100%;">
            <div class="info-layer-title">
                <p id="info-layer-title">黄鹤楼</p>
                <img id="info-layer-close" width="32px" src="../assets/css/bootstrap/icons/x-circle-fill-white.svg" />
            </div>

            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">诗文</li>
                    <li>背景</li>
                    <li>注释</li>
                    <li>赏析</li>
                    <li>地理环境</li>
                </ul>
                <div class="layui-tab-content" style="height: 200px; overflow: hidden;">
                    <div id="poem-poem" class="layui-tab-item layui-show">
                        <div id="left-top-text">
                            <p><span class="poem-title">黄鹤楼</span><span class="poem-sub-title">&nbsp;&nbsp;—崔颢</span>
                            </p>
                            <hr>
                            <div>
                                <p>昔人已乘黄鹤去，此地空余黄鹤楼。</p>
                                <p>黄鹤一去不复返，白云千载空悠悠。</p>
                                <p>晴川历历<a target="_blank"
                                        href="https://hanyu.baidu.com/s?wd=%E5%B4%94%E9%A2%A2">汉阳</a>树，芳草萋萋<a
                                        target="_black"
                                        href="https://hanyu.baidu.com/s?wd=%E9%B9%A6%E9%B9%89%E6%B4%B2&amp;ptype=zici">鹦鹉洲</a>。
                                </p>
                                <p>日暮乡关何处是？烟波江上使人愁。</p>
                            </div>
                        </div>
                    </div>
                    <div id="poem-backgroud" class="layui-tab-item">
                        <p>这首诗具体创作时间已无从考证。黄鹤楼因其所在之武昌黄鹤山（又名蛇山）而得名，传说古代仙人子安乘黄鹤过此（见《齐谐记》）；又传说费祎登仙驾鹤于此（见《太平寰宇记》），这首诗诗就是从楼名之由来写起的。诗人登临黄鹤楼，览眼前景物，即景生情，诗兴大作，创作了这首诗。
                        </p>
                    </div>
                    <div id="poem-annotation" class="layui-tab-item">
                        <p>(1)黄鹤楼：故址在湖北省武汉市武昌区，民国初年被火焚毁，1985年重建，传说古代有一位名叫费祎的仙人，在此乘鹤登仙。
                            (2)昔人：指传说中的仙人子安。因其曾驾鹤过黄鹤山〔又名蛇山〕，遂建楼。
                            (3)乘：驾。
                            (4)去：离开。
                            (5)空：只。
                            (6)返：通返，返回。
                            (7)空悠悠：深，大的意思
                            (8)悠悠：飘荡的样子。
                            (9)川：平原。
                            (10)历历：清楚可数。
                            (11)汉阳：地名，现在湖北省武汉市汉阳区，与黄鹤楼隔江相望。
                            (12)萋萋：形容草木长得茂盛。
                            (13)鹦鹉洲：在湖北省武汉市武昌区西南，根据后汉书记载，汉黄祖担任江夏太守时，在此大宴宾客，有人献上鹦鹉，故称鹦鹉洲。唐朝时在汉阳西南长江中，后逐渐被水冲没。
                            (14)乡关：故乡。</p>
                    </div>
                    <div id="poem-analysis" class="layui-tab-item">
                        <p>这首诗是吊古怀乡之佳作。诗人登临古迹黄鹤楼，泛览眼前景物，即景而生情，诗兴大作，脱口而出，一泻千里。既自然宏丽，又饶有风骨。诗虽不协律，但音节浏亮而不拗口。真是信手而就，一气呵成，成为历代所推崇的珍品。传说李白登此楼，目睹此诗，大为折服。说：“眼前有景道不得，崔颢题诗在上头。”严沧浪也说唐人七言律诗，当以此为第一。足见诗贵自然，纵使格律诗也无不如此。
                        </p>
                    </div>
                    <div id="poem-geography" class="layui-tab-item">
                        黄鹤楼位于湖北省武汉市长江南岸的武昌蛇山之巅，濒临万里长江，是国家5A级旅游景区，“江南三大名楼”之一，自古享有“天下江山第一楼“和”天下绝景“之称。黄鹤楼是武汉市标志性建筑，与晴川阁、古琴台并称“武汉三大名胜”。
                        [1-2]
                        黄鹤楼始建于三国时代吴黄武二年（公元223年），三国时期该楼只是夏口城一角瞭望守戍的“军事楼”，晋灭东吴以后，三国归于一统，该楼在失去其军事价值的同时，随着江夏城地发展，逐步演变成为官商行旅“游必于是”、“宴必于是”的观赏楼。唐代诗人崔颢在此题下《黄鹤楼》一诗，李白在此写下《黄鹤楼送孟浩然之广陵》，历代文人墨客在此留下了许多千古绝唱，使得黄鹤楼自古以来闻名遐迩。
                        黄鹤楼坐落在海拔61.7米的蛇山顶，以清代“同治楼”为原型设计，京广铁路的列车从楼下呼啸而过。楼高5层，总高度51.4米，建筑面积3219平方米。黄鹤楼内部由72根圆柱支撑，外部有60个翘角向外伸展，屋面用10多万块黄色琉璃瓦覆盖构建而成。
                        [1-2]
                        黄鹤楼楼外铸铜黄鹤造型、胜像宝塔、牌坊、轩廊、亭阁等一批辅助建筑，将主楼烘托得更加壮丽。主楼周围还建有白云阁、象宝塔、碑廊、山门等建筑。整个建筑具有独特的民族风格，散发出中国传统文化的精神、气质、神韵。它与蛇山脚下的武汉长江大桥交相辉映；登楼远眺，武汉三镇的风光尽收眼底。
                        黄鹤楼现为国家AAAAA级旅游景区。</div>
                </div>
            </div>

            <hr>
            <div class="info-layer-gallery">
                <p id="info-layer-gallery-title">相册</p>
                <hr>
                <p class="info-layer-gallery-images">
                    <img class="info-layer-gallery-img" src="../assets/img/yellow-tower.jpeg" />
                    <img class="info-layer-gallery-img info-layer-gallery-img-right"
                        src="../assets/img/yellow-tower-2.jpeg" />
                    <img class="info-layer-gallery-img info-layer-gallery-img-right"
                        src="../assets/img/yueyang-tower.jpeg" />
                    <img class="info-layer-gallery-img info-layer-gallery-img-right"
                        src="../assets/img/yueyang-tower.jpeg" />
                </p>
            </div>
        </div>
        <div id="info-layer-second-level" class="info-layer-second-level-hide">
            <div>
                <p id="info-layer-second-level-title">详情</p>
                <div class="info-layer-second-level-back">
                    <img style="width: 16px;height: 16px;" src="../assets/css/bootstrap/icons/chevron-left.svg" />
                    <p>返回</p>
                </div>
            </div>
            <hr>
            <p id="info-layer-second-level-content">
                巍峨耸立于武昌蛇山的黄鹤楼，享有“天下绝景”的盛誉，与湖南岳阳楼，江西滕王阁并称为“江南三大名楼”。黄鹤楼始建于三国时期吴黄武二年（公元223年），传说是为了军事目的而建，孙权为实现“以武治国而昌”（“武昌”的名称由来于此），筑城为守，建楼以嘹望。至唐朝，其军事性质逐渐演变为著名的名胜景点，历代文人墨客到此游览，留下不少脍炙人口的诗篇。唐代诗人崔颢一首“昔人已乘黄鹤去，此地空余黄鹤楼”已成为千古绝唱，更使黄鹤楼名声大噪。黄鹤楼的形制自创建以来，各朝皆不相同，但都显得高古雄浑，极富个性。从楼的纵向看各层排檐与楼名直接有关，形如黄鹤，展翅欲飞，整座楼的雄浑之中又不失精巧，富于变化的韵味和美感。
            </p>
        </div>
        <div id="gallery" class="gallery-hide">
            <div class="gallery-title">
                <div id="gallery-back">
                    <img style="width: 32px; height: 32px;"
                        src="../assets/css/bootstrap/icons/chevron-left-white.svg" />
                    <p style="margin: 0;display: inline; font-size: 1rem;">返回</p>
                </div>
            </div>
            <div class="gallery-carousel">
                <div id="gallery-carousel" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower-2.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower-2.jpeg" />
                        </div>
                    </div>

                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
            </div>

            <div class="gallery-thumbs">
                <div id="gallery-thumbs" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide gallery-thumbs-slide">
                            <img src="../assets/img/yellow-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower-2.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower-2.jpeg" />
                        </div>
                    </div>
                </div>
            </div>

        </div> -->
    </div>
    </div>

    <div id="sidebar">
        <div style="height: 100%;width: 100%;">
            <div class="sidebar-title">
                <p id="sidebar-title">黄鹤楼</p>
                <div class="sidebar-title-tabcontainer">
                    <div class="sidebar-title-tab sidebar-title-tab-active" data-target="#location-content">
                        <p>诗文</p>
                    </div>
                    <div class="sidebar-title-tab"  data-target="#location-scene">
                        <p>场景</p>
                    </div>
                    <div class="sidebar-title-tab"  data-target="#location-history">
                        <p>历史文化</p>
                    </div>
                </div>
                <img id="sidebar-close" width="32px" src="../assets/css/bootstrap/icons/x-circle-fill-white.svg" />
            </div>

            <div id="location-content" class="sidebar-tab sidebar-tab-active">
                <div class="sidebar-tab-content" data-type="poem" data-key="黄鹤楼-崔颢（唐）">
                    <p class="sidebar-tab-content-title">黄鹤楼-崔颢（唐)</p>
                    <p class="sidebar-tab-content-summary">昔人已乘黄鹤去，此地空余黄鹤楼。
                        黄鹤一去不复返，白云千载空悠悠。
                        晴川历历汉阳树，芳草萋萋鹦鹉洲。
                        日暮乡关何处是？烟波江上使人愁。</p>
                </div>
                <hr>
                <div class="sidebar-tab-content" data-type="poem" data-key="望黄鹤楼-李白（唐）">
                    <p class="sidebar-tab-content-title">望黄鹤楼-李白（唐）</p>
                    <p class="sidebar-tab-content-summary">东望黄鹤山，雄雄半空出。四面生白云，中峰倚红日。
                        岩峦行穹跨，峰嶂亦冥密。颇闻列仙人，于此学飞术。
                        一朝向蓬海，千载空石室。金灶生烟埃，玉潭秘清谧。
                        地古遗草木，庭寒老芝术，蹇予羡攀跻，因欲保闲逸。</p>
                </div>
                <hr>
                <div class="sidebar-tab-content" data-type="poem" data-key="菩萨蛮·黄鹤楼-毛泽东（现代）">
                    <p class="sidebar-tab-content-title">菩萨蛮·黄鹤楼-毛泽东（现代）</p>
                    <p class="sidebar-tab-content-summary">茫茫九派流中国，
                        沉沉一线穿南北。
                        烟雨莽苍苍，
                        龟蛇锁大江。
                        黄鹤知何去？
                        剩有游人处。
                        把酒酹滔滔，
                        心潮逐浪高！</p>
                </div>
            </div>

            <div id="location-scene" class="sidebar-tab">
                <div>
                    <p><button class="btn btn-link">历史变迁</button></p>
                    <p><button class="btn btn-link">名称来历</button></p>
                    <p><button class="btn btn-link">景观介绍</button></p>
                </div>
            </div>

            <div id="location-history" class="sidebar-tab">
                <div>
                    <div class="sidebar-tab-content" data-type="history" data-key="建于三国时代" data-size="middle">
                        <p class="sidebar-tab-content-title">建于三国时代</p>
                        <p class="sidebar-tab-content-summary">黄鹤楼始建于三国时代东吴黄武二年（223年）。
                            三国时期黄鹤楼只是夏口城一角瞭望守戍的“军事楼”，晋灭东吴以后，三国归于一统，该楼在失去其军事价值的同时，随着江夏城地发展，逐步演变成为官商行旅“游必于是”、“宴必于是”的观赏楼。。</p>
                    </div>
                    <hr>
                    <div class="sidebar-tab-content" data-type="history" data-key="崔颢题下《黄鹤楼》" data-size="middle">
                        <p class="sidebar-tab-content-title">崔颢题下《黄鹤楼》</p>
                        <p class="sidebar-tab-content-summary">这首诗是吊古怀乡之佳作。诗人登临古迹黄鹤楼，泛览眼前景物，即景而生情，诗兴大作，脱口而出，一泻千里。既自然宏丽，又饶有风骨。诗虽不协律，但音节浏亮而不拗口。真是信手而就，一气呵成，成为历代所推崇的珍品。传说李白登此楼，目睹此诗，大为折服。说：“眼前有景道不得，崔颢题诗在上头。”严沧浪也说唐人七言律诗，当以此为第一。足见诗贵自然，纵使格律诗也无不如此。</p>
                    </div>
                    <hr>
                    <div class="sidebar-tab-content" data-type="history" data-key="黄鹤楼重建" data-size="middle">
                        <p class="sidebar-tab-content-title">黄鹤楼重建</p>
                        <p class="sidebar-tab-content-summary">1957年建武汉长江大桥武昌引桥时，占用了黄鹤楼旧址，1981年重建黄鹤楼时，选址在距旧址约1000米的蛇山峰岭上。 [3] 
                            1981年10月，重修工程破土开工，1985年6月落成，主楼以清同治楼为蓝本，但更高大雄伟。 [4]</p>
                    </div>
                </div>
            </div>

            <hr>
            <div class="sidebar-gallery">
                <p id="sidebar-gallery-title">相册</p>
                <hr>
                <p class="sidebar-gallery-images">
                    <img class="sidebar-gallery-img" src="../assets/img/yellow-tower.jpeg" />
                    <img class="sidebar-gallery-img sidebar-gallery-img-right"
                        src="../assets/img/yellow-tower-2.jpeg" />
                    <img class="sidebar-gallery-img sidebar-gallery-img-right" src="../assets/img/yueyang-tower.jpeg" />
                    <img class="sidebar-gallery-img sidebar-gallery-img-right" src="../assets/img/yueyang-tower.jpeg" />
                </p>
            </div>
        </div>
        
        <div id="gallery" class="gallery-hide">
            <div class="gallery-title">
                <div id="gallery-back">
                    <img style="width: 32px; height: 32px;"
                        src="../assets/css/bootstrap/icons/chevron-left-white.svg" />
                    <p style="margin: 0;display: inline; font-size: 1rem;">返回</p>
                </div>
            </div>
            <div class="gallery-carousel">
                <div id="gallery-carousel" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower-2.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower-2.jpeg" />
                        </div>
                    </div>

                    <div class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>
            </div>

            <div class="gallery-thumbs">
                <div id="gallery-thumbs" class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide gallery-thumbs-slide">
                            <img src="../assets/img/yellow-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yellow-tower-2.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower.jpeg" />
                        </div>
                        <div class="swiper-slide gallery-carousel-slide">
                            <img src="../assets/img/yueyang-tower-2.jpeg" />
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>




    <script>
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function () {
            var element = layui.element;
            //…
        });
        var sidebar = new SideBar2();
    </script>
</body>

</html>